<template>

  <el-dialog
    title="选择部门"
    :visible.sync="dialogVisible"
    width="50%"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <el-container>
      <el-input
        v-model="searchKey"
        placeholder="搜索部门"
        class="input-with-select"
        style="margin: 5px auto"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="departmentfliter"
        />
      </el-input>

      <el-main style="padding: 10px 0">
        <el-row>
          <el-col
            :span="24"
            class="departList"
          >
            <el-container>
              <el-main>
                <div class="my-list table-tree">
                  <el-tree
                    ref="treeref"
                    :data="department"
                    :props="deaprops"
                    :expand-on-click-node="false"
                    :check-on-click-node="true"
                    show-checkbox
                    :check-strictly="true"
                    node-key="Id"
                    :default-expand-all="true"
                    :filter-node-method="filterNode"
                    @node-click="handleNodeClick"
                    @check-change="ckeckchoose"
                  />
                </div>
              </el-main>
            </el-container>
          </el-col>
        </el-row>
      </el-main>
      <el-main class="select-person">
        <el-row
          type="flex"
          style="flex-wrap: wrap"
        >
          <el-tag
            v-for="tag in tags"
            :key="tag.Id"
            style="margin: 10px"
            closable
            @close="handleClose(tag)"
          >
            {{ tag.OrgName }}
          </el-tag>
        </el-row>
      </el-main>
      <el-footer>

        <div>
          <el-button
            size="medium"
            @click="onCancel"
          >返回</el-button>
          <el-button
            type="primary"
            size="medium"
            @click="onSubmit"
          >提交</el-button>
        </div>
      </el-footer>
    </el-container>
  </el-dialog>

</template>
<script>
import { getDepartment } from '@/api/department/department'
import { deepClone } from '@/utils/index'
export default {
  props: {
    echoList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      deaprops: {
        value: 'Id', // ID字段名
        label: 'OrgName', // 显示名称
        children: 'Children' // 子级字段名
      },
      dialogVisible: false, // 弹窗
      searchKey: '',
      department: [], // 部门树形
      tags: [] // 标签
    }
  },
  watch: {
    searchKey(val) {
      this.$refs.treeref.filter(val)
    },
    echoList: {
      deep: true,
      handler(val) {
        this.tags = deepClone(val)
      }
    }
  },
  mounted() {},
  methods: {
    // 获取部门数据
    getdepartment() {
      getDepartment().then(res => {
        this.department = res.Data
      })
    },
    // 取消
    onCancel() {
      this.tags = []
      this.dialogVisible = false
    },
    // 提交
    onSubmit() {
      this.$emit('submitSelect', this.tags)
      this.onCancel()
      // 回调方法tags为选中的数组值
    },
    // 点击的checkbox
    ckeckchoose(data, ischose, leaf) {
      if (ischose) {
        var check = true
        this.tags.forEach(tag => {
          if (tag.Id === data.Id) {
            check = false
          }
        })
        if (check) {
          this.tags.push({ Id: data.Id, OrgName: data.OrgName })
        }
      } else {
        this.tags.forEach((item, index) => {
          if (item.Id === data.Id) {
            this.tags.splice(index, 1)
          }
        })
      }
    },
    // 移除tag
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1)
      this.$refs.treeref.setCheckedNodes(this.tags)
    },
    // 弹窗
    showSelectDepartmentDialog() {
      this.dialogVisible = true
      this.tags = deepClone(this.echoList)
      this.getdepartment()
      // 等待dom全部加载再渲染
      this.$nextTick(() => {
        var arr = []
        this.tags.forEach(item => {
          arr.push(item.Id)
        })
        this.$refs.treeref.setCheckedKeys(arr)
      })
    },
    // 点击tree某个节点
    handleNodeClick(data) {},
    filterNode(value, data) {
      if (!value) return true
      return data.OrgName.indexOf(value) !== -1
    },
    departmentfliter() {
      this.$refs.treeref.filter(this.searchKey)
    }
  }
}
</script>
